<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能手表 - 产品展示</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/chanye.css"></link>
</head>
<body>
    <div id="app">
        <div class="container">
            <header>
                <h1>智能手表系列</h1>
                <p>探索最新科技，体验智能生活</p>
                <div class="cart-icon" @click="viewCart">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                        <path d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"/>
                    </svg>
                    <div class="cart-count">{{ cartItemCount }}</div>
                </div>
            </header>
            
            <div class="product-container">
                <div class="product-images">
                    <div class="main-image">
                        <img :src="currentImage" :alt="product.name">
                    </div>
                    
                    <div class="thumbnail-container">
                        <div 
                            v-for="(image, index) in product.images" 
                            :key="index"
                            class="thumbnail" 
                            :class="{ active: currentImageIndex === index }"
                            @click="switchImage(index)"
                        >
                            <img :src="image" :alt="'产品图片 ' + (index + 1)">
                        </div>
                    </div>
                </div>
                
                <div class="product-details">
                    <h2 class="product-title">{{ product.name }}</h2>
                    <div class="product-price">¥{{ product.price }}</div>
                    
                    <p class="product-description">
                        {{ product.description }}
                    </p>
                    
                    <div class="option-section">
                        <div class="option-title">选择颜色</div>
                        <div class="color-options">
                            <div 
                                v-for="color in product.colors" 
                                :key="color.name"
                                class="color-option" 
                                :class="{ active: selectedColor === color.name }"
                                :style="{ backgroundColor: color.code }"
                                @click="selectColor(color.name)"
                            ></div>
                        </div>
                    </div>
                    
                    <div class="option-section">
                        <div class="option-title">选择规格</div>
                        <div class="size-options">
                            <div 
                                v-for="size in product.sizes" 
                                :key="size"
                                class="size-option" 
                                :class="{ active: selectedSize === size }"
                                @click="selectSize(size)"
                            >
                                {{ size }}
                            </div>
                        </div>
                    </div>
                    
                    <div class="stock-status" :class="stockStatusClass">
                        {{ stockMessage }}
                    </div>
                    
                    <div class="add-to-cart">
                        <button 
                            class="cart-btn" 
                            @click="addToCart" 
                            :disabled="product.stock === 0"
                        >
                            {{ product.stock === 0 ? '缺货' : '加入购物车' }}
                        </button>
                        
                        <button 
                            class="clear-cart-btn" 
                            @click="clearCart" 
                            :disabled="cartItemCount === 0"
                        >
                            清除购物车
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="notification" :class="{ show: showNotification }">
            {{ notificationMessage }}
        </div>
    </div>
</body>
</html>

<script>
    new Vue({
        el: '#app',
        data: {
            product: {
                name: '智能手表 Pro',
                price: 1299,
                description: '这款智能手表配备高清显示屏、心率监测、GPS定位和长达7天的电池续航。采用优质材料制造，兼具时尚外观与强大功能。',
                images: [
                    'https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    'https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    'https://images.unsplash.com/photo-1508685096489-7aacd43bd3b1?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
                ],
                colors: [
                    { name: '黑色', code: '#2c3e50' },
                    { name: '银色', code: '#bdc3c7' },
                    { name: '金色', code: '#f1c40f' }
                ],
                sizes: ['40mm', '44mm', '46mm'],
                stock: 15
            },
            currentImageIndex: 0,
            selectedColor: '黑色',
            selectedSize: '44mm',
            showNotification: false,
            notificationMessage: '',
            cartItems: []
        },
        computed: {
            currentImage() {
                return this.product.images[this.currentImageIndex];
            },
            stockStatusClass() {
                if (this.product.stock === 0) {
                    return 'out-of-stock';
                } else if (this.product.stock < 10) {
                    return 'low-stock';
                } else {
                    return 'in-stock';
                }
            },
            stockMessage() {
                if (this.product.stock === 0) {
                    return '暂时缺货';
                } else if (this.product.stock < 10) {
                    return `仅剩 ${this.product.stock} 件`;
                } else {
                    return '库存充足';
                }
            },
            cartItemCount() {
                // 计算购物车中所有商品的总数量
                return this.cartItems.reduce((total, item) => total + item.quantity, 0);
            }
        },
        methods: {
            switchImage(index) {
                this.currentImageIndex = index;
            },
            selectColor(color) {
                this.selectedColor = color;
            },
            selectSize(size) {
                this.selectedSize = size;
            },
            addToCart() {
                if (this.product.stock > 0) {
                    // 创建商品对象
                    const item = {
                        id: Date.now(), // 使用时间戳作为唯一ID
                        name: this.product.name,
                        price: this.product.price,
                        color: this.selectedColor,
                        size: this.selectedSize,
                        quantity: 1,
                        image: this.currentImage
                    };
                    
                    // 检查购物车中是否已有相同颜色和规格的商品
                    const existingItemIndex = this.cartItems.findIndex(
                        cartItem => cartItem.color === item.color && cartItem.size === item.size
                    );
                    
                    if (existingItemIndex !== -1) {
                        // 如果存在相同商品，增加数量
                        this.cartItems[existingItemIndex].quantity += 1;
                    } else {
                        // 否则添加新商品
                        this.cartItems.push(item);
                    }
                    
                    // 显示通知
                    this.notificationMessage = '商品已成功添加到购物车！';
                    this.showNotification = true;
                    setTimeout(() => {
                        this.showNotification = false;
                    }, 3000);
                }
            },
            clearCart() {
                if (this.cartItems.length > 0) {
                    this.cartItems = [];
                    this.notificationMessage = '购物车已清空！';
                    this.showNotification = true;
                    setTimeout(() => {
                        this.showNotification = false;
                    }, 3000);
                }
            },
            viewCart() {
                if (this.cartItemCount === 0) {
                    alert('购物车为空');
                } else {
                    let cartContent = '购物车内容：\n\n';
                    this.cartItems.forEach(item => {
                        cartContent += `${item.name} - ${item.color} - ${item.size} x ${item.quantity}\n`;
                    });
                    cartContent += `\n总计: ${this.cartItemCount} 件商品`;
                    alert(cartContent);
                }
            }
        }
    });
</script>